<template>
  <div>
    <div style="background-color: #fff;width: 100%;">
      <div style="padding: 10px 10px 10px 10px; display: flex;">
        <el-input v-model="nameInput" placeholder="输入商品名称" style="width: 300px;">
          <i slot="append" class="el-icon-search" @click="searchLease()"
            style="align-items: center;font-size: large;"></i>
        </el-input>
        <div style="margin-left: auto;">
          <el-button type="primary" @click="rollImageVisible=true">轮播图管理</el-button>
          <el-button type="danger" @click="batchDelete">批量删除</el-button>
        </div>
      </div>
      <RollImage v-model="rollImageVisible"></RollImage>

      <div style="padding:10px;margin-bottom: 100px;margin-right:50px ;">
        <!-- biaoge -->
        <el-table ref="multipleTable" border :data="tableData" tooltip-effect="dark"
          @selection-change="handleSelectionChange" style="width: 100%">

          <el-table-column label="商品信息" width="500">
            <template slot-scope="scope">
              <div style=" display: flex;align-items: center;">
                <el-image style="width: 150px; height: 80px" :src="scope.row.image" fit="scale-down"></el-image>
                <div>
                  {{ scope.row.name }}<br />
                  <div style="color: rgb(162, 162, 162);">
                    商品编号:{{ scope.row.id }}</div>
                </div>
              </div>

            </template>
          </el-table-column>
          <el-table-column label="价格(元)" width="120">
            <template slot-scope="scope">
              <div>{{ scope.row.price.toFixed(2) }}</div>
            </template>
          </el-table-column>
          <el-table-column prop="stock" label="库存" width="120">
          </el-table-column>
          <el-table-column prop="salesVolume" label="销量" width="120">
          </el-table-column>
          <el-table-column label="上架时间" width="200">
            <template slot-scope="scope">
              <div>{{ scope.row.createTime }}</div>
              <div v-if="scope.row.status === 1" style="color:rgb(127, 255, 187);">在售中</div>
              <div v-else-if="scope.row.status === 2" style="color:rgb(255, 47, 36);">库存不足</div>
              <div v-else-if="scope.row.status === 0" style="color:rgb(125, 125, 125);">停售中</div>

            </template>
          </el-table-column>
          <el-table-column label="操作" width="200">
            <template slot-scope="scope">
              <span class="handle" @click="edit(scope.row.id)">编辑</span>
              <!-- <span class="handle">降价</span> -->
              <span v-if="scope.row.status === 1" @click="handleStatus(0, scope.row.id)" class="handle">停售</span>
              <span v-else-if="scope.row.status === 0" @click="handleStatus(1, scope.row.id)" class="handle">起售</span>
            </template>
          </el-table-column>
          <el-table-column label="多选" type="selection" width="55"> </el-table-column>


        </el-table>
        <el-pagination style="margin-top: 20px;" :page-size="pageSize" layout="total, prev, pager, next"
          :total="pageTotal" :hide-on-single-page="true" @current-change="handlePageChange">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import { getPage,del,changeStatus } from '@/api/leaseManage'
import RollImage from '@/components/RollImage.vue'
export default {
  name: 'LeaseList',
  data() {
    return {
      tableData: [],
      pageTotal: 0,
      pageSize: 10,
      page: 1,
      nameInput: '',
      multipleSelection: [],
      rollImageVisible:false,
    }
  },
  methods: {
    searchLease(){
      this.leaseQueue
    },
    handlePageChange(val) {
      this.page = val
      this.leaseQueue()
    },
    handleSelectionChange(val) {
      this.multipleSelection = val.map((obj) => {
        return obj.id
      })
    },
    async handleStatus(status,id){
      await changeStatus(status,id)
      await this.leaseQueue()
    },
    async leaseQueue() {
      let res = await getPage(this.nameInput, this.page, this.pageSize)
      //console.log(res)
      this.pageTotal = res.data.data.total
      this.tableData = res.data.data.records
    },
    edit(id){
      this.$router.replace({ path: `add/${id}` })
    },
    async batchDelete(){
      let res=await del(this.multipleSelection)
      if(res.data.code===1)this.$message('删除成功')
      this.leaseQueue()
    },
    
  },
  created() {
    this.leaseQueue()
  },
  components:{
    RollImage
  }
}
</script>

<style>
.handle {
  margin: 0 10px;
  color: #409EFF;
  /* 鼠标移上去有手形 */
  cursor: pointer
}
</style>